<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue2.js"></script>
</head>

<body>
    <div id="box">
        <!-- 中间的符号为管道符 右侧名字为过滤器名字 在执行时会将原始变量值通过管道符送到过滤器中,将过滤器返回的最终结果显示在页面上 -->
        {{myname | mydatafilter}} 
        <!-- vue3中双大括号中支持字符串、变量、运算符、三目运算符、字符串拼接、表达式-->
        <!-- 由于管道符语法四不像,所以删除了 -->
    </div>
</body>
<script>
    var obj = {
        el:'#box',
        data(){
            return{
                myname:'zhangsan',
            }
        },
        filters:{   //filters过滤器
            mydatafilter(a){   //过滤器名字
                console.log(a);   //会将原始数据当做形参传入
                return 11111
            }
        }
    }
    new Vue(obj);
</script>

</html>